<template>
  <div class="app-container">
    <!-- 统计卡片 -->
    <div class="statistics-grid">
      <div class="stat-card">
        <div class="stat-title">今日交易次数</div>
        <div class="stat-value">{{ statistics.todayCount }}</div>
        <div class="stat-change positive">
          <i class="el-icon-caret-top"></i>
          较昨日 +12.5%
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-title">今日交易额</div>
        <div class="stat-value">{{ statistics.todayVolume }} USDT</div>
        <div class="stat-change positive">
          <i class="el-icon-caret-top"></i>
          较昨日 +8.3%
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-title">成功率</div>
        <div class="stat-value">{{ statistics.successRate }}%</div>
        <div class="stat-change positive">
          <i class="el-icon-caret-top"></i>
          较昨日 +1.2%
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-title">平均收益</div>
        <div class="stat-value">{{ statistics.avgProfit }}%</div>
        <div class="stat-change positive">
          <i class="el-icon-caret-top"></i>
          较昨日 +0.8%
        </div>
      </div>
    </div>

    <!-- 实时交易监控 -->
    <el-card class="trade-monitor">
      <div slot="header" class="card-header">
        <span class="title">实时交易监控</span>
        <div class="header-right">
          <el-radio-group v-model="autoRefresh" size="small">
            <el-radio-button :label="true">自动刷新</el-radio-button>
            <el-radio-button :label="false">手动刷新</el-radio-button>
          </el-radio-group>
          <el-button type="primary" icon="el-icon-refresh" size="small" :loading="refreshing" @click="handleRefresh">刷新</el-button>
        </div>
      </div>
      <el-table
        :data="tradeList"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        v-loading="refreshing"
      >
        <el-table-column prop="time" label="时间" width="180"></el-table-column>
        <el-table-column prop="strategy" label="策略名称" width="150"></el-table-column>
        <el-table-column prop="symbol" label="交易对" width="120"></el-table-column>
        <el-table-column prop="type" label="交易类型" width="100">
          <template slot-scope="scope">
            <span :class="scope.row.type === 'buy' ? 'buy-type' : 'sell-type'">
              {{ scope.row.type === 'buy' ? '买入' : '卖出' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="120"></el-table-column>
        <el-table-column prop="amount" label="数量" width="120"></el-table-column>
        <el-table-column prop="total" label="总额" width="120"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 'success' ? 'success' : 'danger'" size="mini">
              {{ scope.row.status === 'success' ? '成功' : '失败' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 图表和告警 -->
    <div class="charts-alerts">
      <el-card class="chart-card">
        <div slot="header" class="card-header">
          <span class="title">交易分析</span>
          <el-select v-model="timeRange" size="small" style="width: 120px">
            <el-option label="今日" value="today"></el-option>
            <el-option label="本周" value="week"></el-option>
            <el-option label="本月" value="month"></el-option>
          </el-select>
        </div>
        <div class="chart-container" ref="tradeChart">
          <!-- 这里可以集成 ECharts -->
          <div style="height: 300px; display: flex; align-items: center; justify-content: center; background: #f8f9fa;">
            交易分析图表
          </div>
        </div>
      </el-card>

      <el-card class="alert-card">
        <div slot="header" class="card-header">
          <span class="title">告警信息</span>
          <el-button type="text" @click="clearAllAlerts">清除全部</el-button>
        </div>
        <div class="alert-list">
          <div v-for="(alert, index) in alertList" :key="index" class="alert-item">
            <el-alert
              :title="alert.title"
              :type="alert.type"
              :description="alert.description"
              show-icon
              :closable="false">
            </el-alert>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'TradeMonitor',
  data() {
    return {
      statistics: {
        todayCount: 156,
        todayVolume: '325,420.50',
        successRate: 99.5,
        avgProfit: 2.8
      },
      autoRefresh: true,
      refreshing: false,
      timeRange: 'today',
      tradeChart: null,
      tradeList: [
        {
          time: '2025-05-26 15:30:00',
          strategy: '网格交易-BTC',
          symbol: 'BTC/USDT',
          type: 'buy',
          price: '35,420.50',
          amount: '0.5',
          total: '17,710.25',
          status: 'success'
        },
        {
          time: '2025-05-26 15:25:00',
          strategy: '马丁-ETH',
          symbol: 'ETH/USDT',
          type: 'sell',
          price: '2,150.75',
          amount: '3.2',
          total: '6,882.40',
          status: 'success'
        },
        {
          time: '2025-05-26 15:20:00',
          strategy: '趋势跟踪-BNB',
          symbol: 'BNB/USDT',
          type: 'buy',
          price: '320.45',
          amount: '10',
          total: '3,204.50',
          status: 'success'
        }
      ],
      alertList: [
        {
          type: 'warning',
          title: '策略告警',
          description: '网格交易-BTC 触发止损线，已自动停止'
        },
        {
          type: 'error',
          title: '系统告警',
          description: 'API 连接异常，请检查网络状态'
        },
        {
          type: 'success',
          title: '策略提醒',
          description: '马丁策略-ETH 已完成一轮交易，获利 2.5%'
        }
      ]
    }
  },
  methods: {
    tableRowClassName({ row }) {
      return row.type === 'buy' ? 'buy-row' : 'sell-row'
    },
    handleRefresh() {
      this.refreshing = true
      setTimeout(() => {
        this.refreshing = false
        this.$message.success('数据已更新')
      }, 1000)
    },
    clearAllAlerts() {
      this.alertList = []
      this.$message.success('已清除所有告警')
    },
    initTradeChart() {
      if (this.tradeChart) {
        this.tradeChart.dispose()
      }
      this.tradeChart = echarts.init(this.$refs.tradeChart)
      
      // 生成模拟数据
      const hours = ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
      const volumes = hours.map(() => Math.floor(Math.random() * 50000 + 20000))
      const rates = hours.map(() => (Math.random() * 2 + 98).toFixed(1))

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        legend: {
          data: ['交易量', '成功率'],
          top: 10
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: hours,
          axisLine: {
            lineStyle: {
              color: '#DCDFE6'
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '交易量(USDT)',
            position: 'left',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#409EFF'
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '成功率(%)',
            position: 'right',
            min: 95,
            max: 100,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#67C23A'
              }
            },
            axisLabel: {
              formatter: '{value}%'
            }
          }
        ],
        series: [
          {
            name: '交易量',
            type: 'bar',
            data: volumes,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#409EFF' },
                { offset: 1, color: 'rgba(64,158,255,0.3)' }
              ])
            }
          },
          {
            name: '成功率',
            type: 'line',
            yAxisIndex: 1,
            data: rates,
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
              color: '#67C23A',
              width: 2
            },
            itemStyle: {
              color: '#67C23A',
              borderWidth: 2,
              borderColor: '#fff'
            }
          }
        ]
      }
      
      this.tradeChart.setOption(option)
    },
    updateChart() {
      this.initTradeChart()
    }
  },
  watch: {
    timeRange() {
      this.updateChart()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initTradeChart()
      window.addEventListener('resize', () => {
        if (this.tradeChart) {
          this.tradeChart.resize()
        }
      })
    })
    
    if (this.autoRefresh) {
      // 每30秒自动刷新一次
      setInterval(this.handleRefresh, 30000)
    }
  },
  beforeDestroy() {
    if (this.tradeChart) {
      this.tradeChart.dispose()
      this.tradeChart = null
    }
    window.removeEventListener('resize', this.handleResize)
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;

  .statistics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 20px;

    .stat-card {
      background-color: white;
      border-radius: 6px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

      .stat-title {
        color: #7f8c8d;
        font-size: 14px;
        margin-bottom: 10px;
      }

      .stat-value {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 5px;
      }

      .stat-change {
        display: flex;
        align-items: center;
        font-size: 14px;
        
        &.positive {
          color: #67C23A;
        }

        &.negative {
          color: #F56C6C;
        }

        i {
          margin-right: 4px;
        }
      }
    }
  }

  .trade-monitor {
    margin-bottom: 20px;
  }

  .charts-alerts {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-size: 16px;
      font-weight: 600;
    }

    .header-right {
      display: flex;
      gap: 10px;
    }
  }

  .alert-list {
    .alert-item {
      margin-bottom: 10px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .buy-type {
    color: #67C23A;
    font-weight: 500;
  }

  .sell-type {
    color: #F56C6C;
    font-weight: 500;
  }

  ::v-deep .buy-row {
    background-color: rgba(103, 194, 58, 0.1);
  }

  ::v-deep .sell-row {
    background-color: rgba(245, 108, 108, 0.1);
  }

  .chart-container {
    height: 300px;
    width: 100%;
  }
}
</style> 